<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <!-- 引入 vue -->
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--
		生命周期：
			1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
			2.是什么：Vue 在关键时刻帮我们调用的一些特殊名称的函数。
			3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
			4.生命周期函数中的 this 指向是 vm 或 组件实例对象。
	-->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            // vue 完成模板的解析，并且把模板解析成虚拟的 dom，随后把虚拟的 dom 转换成真实的 dom，最后把真实的 dom 放入到
            // 页面后（完成挂载），调用 mounted。在把虚拟的 dom 转换成真实的 dom 时，要使用 diff 算法，类似于缓存
            // 注意，这里是把初始的真实 dom 放入页面后，才会调用 mounted，也就是第一次把真实 dom 放入页面后，才调用 mounted
            mounted() {

            }
        });

        // 通过外部定时器实现（不推荐）
        /*setInterval(() => {
            vm.opacity -= 0.01;
            if (vm.opacity <= 0)
                vm.opacity = 1;
        }, 16);*/
    </script>
</html>